import React, { Component } from 'react'
import {Switch, Route, Link} from 'react-router-dom'
import Small1 from './Small1'
import Small2 from './Small2'
import Small3 from './Small3'

export default class Big extends Component {
  changePage(url) {
    this.props.history.push('/big'+url)
  }
  render() {
    return (
      <div>
        <p>我是父元素</p>
        <Link to="/big/small1">small1</Link><br/>
        <Link to="/big/small2">small2</Link><br/>
        <Link to="/big/small3">small3</Link><br/>
        <hr />
        <button onClick={()=>this.changePage('/small1')}>small1</button>
        <button onClick={()=>this.changePage('/small2')}>small2</button>
        <button onClick={()=>this.changePage('/small3')}>small3</button>
        <Switch>
            {/* 子路由的路径要写完整 */}
            <Route path="/big/small1" component={Small1} />
            <Route path="/big/small2" component={Small2} />
            <Route path="/big/small3" component={Small3} />
        </Switch>
      </div>
    )
  }
}
